<template>
	<view class="uni-file-picker__files">
		<view v-if="!readonly" class="files-button" @click="choose">
			<slot></slot>
		</view>
		<!-- :class="{'is-text-box':showType === 'list'}" -->
		<view v-if="list.length > 0" class="uni-file-picker__lists is-text-box" :style="borderStyle">
			<!-- ,'is-list-card':showType === 'list-card' -->

			<view
				class="uni-file-picker__lists-box"
				v-for="(item, index) in list"
				:key="index"
				:class="{
					'files-border': index !== 0 && styles.dividline,
				}"
				:style="index !== 0 && styles.dividline && borderLineStyle"
			>
				<view class="uni-file-picker__item">
					<!-- :class="{'is-text-image':showType === 'list'}" -->
					<!-- 	<view class="files__image is-text-image">
						<image class="header-image" :src="item.logo" mode="aspectFit"></image>
					</view> -->
					<view class="files__name">{{ item.name }}</view>
					<view v-if="delIcon && !readonly" class="icon-del-box icon-files" @click="delFile(index)">
						<view class="icon-del icon-files"></view>
						<view class="icon-del rotate"></view>
					</view>
				</view>
				<view v-if="(item.progress && item.progress !== 100) || item.progress === 0" class="file-picker__progress">
					<progress
						class="file-picker__progress-item"
						:percent="item.progress === -1 ? 0 : item.progress"
						stroke-width="4"
						:backgroundColor="item.errMsg ? '#ff5a5f' : '#EBEBEB'"
					/>
				</view>
				<view v-if="item.status === 'error'" class="file-picker__mask" @click.stop="uploadFiles(item, index)">
					点击重试
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'uploadFile',
	emits: ['uploadFiles', 'choose', 'delFile'],
	props: {
		filesList: {
			type: Array,
			default() {
				return [];
			},
		},
		delIcon: {
			type: Boolean,
			default: true,
		},
		limit: {
			type: [Number, String],
			default: 9,
		},
		showType: {
			type: String,
			default: '',
		},
		listStyles: {
			type: Object,
			default() {
				return {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {},
				};
			},
		},
		readonly: {
			type: Boolean,
			default: false,
		},
	},
	computed: {
		list() {
			let files = [];
			this.filesList.forEach((v) => {
				files.push(v);
			});
			return files;
		},
		styles() {
			let styles = {
				border: true,
				dividline: true,
				'border-style': {},
			};
			return Object.assign(styles, this.listStyles);
		},
		borderStyle() {
			let { borderStyle, border } = this.styles;
			let obj = {};
			if (!border) {
				obj.border = 'none';
			} else {
				let width = (borderStyle && borderStyle.width) || 1;
				width = this.value2px(width);
				let radius = (borderStyle && borderStyle.radius) || 5;
				radius = this.value2px(radius);
				obj = {
					'border-width': width,
					'border-style': (borderStyle && borderStyle.style) || 'solid',
					'border-color': (borderStyle && borderStyle.color) || '#eee',
					'border-radius': radius,
				};
			}
			let classles = '';
			for (let i in obj) {
				classles += `${i}:${obj[i]};`;
			}
			return classles;
		},
		borderLineStyle() {
			let obj = {};
			let { borderStyle } = this.styles;
			if (borderStyle && borderStyle.color) {
				obj['border-color'] = borderStyle.color;
			}
			if (borderStyle && borderStyle.width) {
				let width = (borderStyle && borderStyle.width) || 1;
				let style = (borderStyle && borderStyle.style) || 0;
				if (typeof width === 'number') {
					width += 'px';
				} else {
					width = width.indexOf('px') ? width : width + 'px';
				}
				obj['border-width'] = width;

				if (typeof style === 'number') {
					style += 'px';
				} else {
					style = style.indexOf('px') ? style : style + 'px';
				}
				obj['border-top-style'] = style;
			}
			let classles = '';
			for (let i in obj) {
				classles += `${i}:${obj[i]};`;
			}
			return classles;
		},
	},

	methods: {
		uploadFiles(item, index) {
			this.$emit('uploadFiles', {
				item,
				index,
			});
		},
		choose() {
			this.$emit('choose');
		},
		delFile(index) {
			this.$emit('delFile', index);
		},
		value2px(value) {
			if (typeof value === 'number') {
				value += 'px';
			} else {
				value = value.indexOf('px') !== -1 ? value : value + 'px';
			}
			return value;
		},
	},
};
</script>

<style lang="scss">
.uni-file-picker__files {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	justify-content: flex-start;
}

.files-button {
	// border: 1px red solid;
}

.uni-file-picker__lists {
	position: relative;
	margin-top: 5px;
	overflow: hidden;
}

.file-picker__mask {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	left: 0;
	color: #fff;
	font-size: 14px;
	background-color: rgba(0, 0, 0, 0.4);
}

.uni-file-picker__lists-box {
	position: relative;
}

.uni-file-picker__item {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	align-items: center;
	padding: 8px 10px;
	padding-right: 5px;
	padding-left: 10px;
}

.files-border {
	border-top: 1px #eee solid;
}

.files__name {
	flex: 1;
	font-size: 14px;
	color: #666;
	margin-right: 25px;
	/* #ifndef APP-NVUE */
	word-break: break-all;
	word-wrap: break-word;
	/* #endif */
}

.icon-files {
	/* #ifndef APP-NVUE */
	position: static;
	background-color: initial;
	/* #endif */
}

// .icon-files .icon-del {
// 	background-color: #333;
// 	width: 12px;
// 	height: 1px;
// }

.is-list-card {
	border: 1px #eee solid;
	margin-bottom: 5px;
	border-radius: 5px;
	box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);
	padding: 5px;
}

.files__image {
	width: 40px;
	height: 40px;
	margin-right: 10px;
}

.header-image {
	width: 100%;
	height: 100%;
}

.is-text-box {
	border: 1px #eee solid;
	border-radius: 5px;
}

.is-text-image {
	width: 25px;
	height: 25px;
	margin-left: 5px;
}

.rotate {
	position: absolute;
	transform: rotate(90deg);
}

.icon-del-box {
	/* #ifndef APP-NVUE */
	display: flex;
	margin: auto 0;
	/* #endif */
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0px;
	bottom: 0;
	right: 5px;
	height: 26px;
	width: 26px;
	// border-radius: 50%;
	// background-color: rgba(0, 0, 0, 0.5);
	z-index: 2;
	transform: rotate(-45deg);
}

.icon-del {
	width: 15px;
	height: 1px;
	background-color: #333;
	// border-radius: 1px;
}

/* #ifdef H5 */
@media all and (min-width: 768px) {
	.uni-file-picker__files {
		max-width: 375px;
	}
}

/* #endif */
</style>
